<template>
  <div id="dictFolder">
    <Breadcrumb content="字典维护" />
    <div class="bodyContent">
      <Splitpanes>
        <Pane :size="folderOpenTag === 0 ? 0 : 12" class="firstPaneBox">
          <vxe-toolbar perfect>
            <template #buttons>
              <div class="smallToolTitle">字典分类</div>
              <vxe-button
                type="text"
                class="button-blue"
                icon="vxe-icon-refresh"
                content="刷新"
                :loading="treeloading"
                @click="findDictTypeList"
              ></vxe-button>
            </template>
          </vxe-toolbar>

          <el-scrollbar class="treeScroll">
            <div class="sampleType">
              <el-tree
                :expand-on-click-node="false"
                :default-expand-all="true"
                :data="dictTypeList"
                :props="defaultProps"
                node-key="id"
                ref="dataTreeRef"
                highlight-current
                class="tools-tree"
                @node-click="handleClickType"
                v-loading="treeloading"
              >
                <template #default="{ data }">
                  <span>{{ data.name }}</span>
                </template>
              </el-tree>
            </div>
          </el-scrollbar>
        </Pane>

        <Pane :size="folderOpenTag === 0 ? 35 : 43">
          <div class="middleBox">
            <vxe-toolbar perfect>
              <template #buttons>
                <vxe-input
                  style="width: 130px"
                  v-model="searchForm.searchValue"
                  type="search"
                  clearable
                  class="vxeInputSearch"
                  placeholder="关键字查询"
                  @clear="findDictTypeAndDictList"
                  @keyup="keyupEnter"
                  @search-click="handleSearch(searchForm.searchValue)"
                ></vxe-input>
                <vxe-button
                  type="text"
                  class="button-blue"
                  icon="vxe-icon-refresh"
                  content="刷新"
                  :loading="folderLoading"
                  @click="findDictTypeAndDictList"
                ></vxe-button>
                <!-- 展示/隐藏分类 -->
                <vxe-button
                  type="text"
                  class="button-blue"
                  :content="showDictTypeText"
                  @click="showDictTypeData()"
                ></vxe-button>
              </template>
            </vxe-toolbar>

            <div class="cardBox" v-loading="folderLoading">
              <el-scrollbar style="height: 100%">
                <el-row :gutter="12">
                  <el-col
                    :span="24"
                    v-for="(dicType, index) in dicTypeList"
                    :key="index"
                    class="elColClazz"
                  >
                    <el-card shadow="never">
                      <template #header>
                        <div class="card-header">
                          <span>{{ dicType.name }}</span>
                        </div>
                      </template>

                      <el-row :gutter="12">
                        <el-col :span="4" v-for="dict in dicType.dictList" :key="dict.id">
                          <el-card
                            :shadow="sltDictId == dict.id ? 'always' : 'hover'"
                            @click="dbClickFolder(dict)"
                            class="folder-image"
                            :class="sltDictId == dict.id ? 'selectedBorder' : ''"
                            :body-style="{ padding: '0 5px' }"
                          >
                            <img src="../../assets/images/message/file2.jpeg" class="image" />
                            <div class="folderNameBox">
                              <el-tooltip
                                class="box-item"
                                effect="dark"
                                :content="dict.name"
                                placement="top"
                              >
                                <span>{{ dict.name }}</span>
                              </el-tooltip>
                            </div>
                          </el-card>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
              </el-scrollbar>
            </div>
          </div>
        </Pane>

        <Pane :size="folderOpenTag === 0 ? 65 : 45">
          <DictChildList ref="dictChildRef" />
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script setup lang="ts">
// 引入组件区==========
import { ref, reactive, getCurrentInstance, nextTick, onMounted, computed, watch } from 'vue';
import Breadcrumb from '@/components/Breadcrumb.vue';
import { Splitpanes, Pane } from 'splitpanes';
let { proxy }: any = getCurrentInstance();
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage';
import { AppStore } from '../../stores/store';
import DictChildList from './DictChildList.vue'; //引入最右侧组件

// 全局变量定义区 ==========
let treeloading = ref(false); //最左侧树加载状态
let folderLoading = ref(false); //中间文件夹加载状态

// 最左侧的树
let defaultProps = {
  children: 'children',
  label: 'name'
};
// 中间关键字
let searchForm = {
  searchValue: ''
};
let sltType: any = {};
let folderOpenTag = ref(0); //默认为0 即不展开最左侧的树
let showDictTypeText = ref('展示分类'); // 中间的 展开折叠按钮
let dictTypeList: any = reactive([]); //最左侧树的数据
let dicTypeList: any = reactive([]); //中间card数据
let dictChildRef: any = ref(null); //点击中间文件夹把信息传递给最右侧子组件
let sltDictId: any = ref(null);

// 方法定义区 =============
// 展开分类/隐藏分类切换
function showDictTypeData() {
  const firstPane = document.querySelector('.firstPaneBox');
  const parentElement = firstPane?.parentElement;
  const splitter = parentElement?.querySelector('.splitpanes__splitter') as HTMLElement;
  if (folderOpenTag.value === 0) {
    showDictTypeText.value = '展示分类';
    folderOpenTag.value = 1;
    if (splitter) {
      splitter.style.visibility = 'visible';
    }
  } else {
    showDictTypeText.value = '隐藏分类';
    folderOpenTag.value = 0;
    if (splitter) {
      splitter.style.visibility = 'hidden';
    }
  }
}

onMounted(() => {
  findDictTypeList(); //页面一加载 获取字典分类列表(树) 刷新(左侧)
  const firstPane = document.querySelector('.firstPaneBox');
  const parentElement = firstPane?.parentElement;
  const splitter = parentElement?.querySelector('.splitpanes__splitter') as HTMLElement;
  if (splitter) {
    splitter.style.visibility = 'hidden';
  }
});
//  获取字典分类列表(树) 刷新(左侧)
function findDictTypeList() {
  sltType = {};
  treeloading.value = true;
  dictTypeList.length = 0; //放入数据前清空数据
  const url = '/api/sys/basDictType/findDictTypeTree';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: {} })
    .then((res: any) => {
      dictTypeList.push(...res.data);
      if (dictTypeList.length > 0) {
        // const sltObj = getChildren(dictTypeList[0]);
        // sltType = sltObj;
        // setCurTypeNode(sltObj.id);
        findDictTypeAndDictList();
      }
      //dictRowClick({ row: dictList[0] }); //默认选中第一条数据
      treeloading.value = false;
    })
    .catch((err: any) => {
      treeloading.value = false;
      VxeMessage('获取字典分类列表(树)失败', VxeNotifyType.error);
    });
}

// 光标定位在指定字典分类上
function setCurTypeNode(nodeId: any) {
  proxy.$nextTick(() => {
    const treeName = 'dataTreeRef';
    const tree: any = proxy.$refs[treeName];
    tree.setCurrentKey(nodeId);
  });
}

//点击左侧的树 中间文件夹分类变化
function handleClickType(obj: any, node: any, data: any) {
  sltType = obj;
  findDictTypeAndDictList();
}

// 获取中间字典文件夹和左右侧的数据
function findDictTypeAndDictList() {
  dicTypeList.length = 0; //放入数据前清空数据
  folderLoading.value = true;
  const url = '/api/sys/basDict/findDictTypeAndDictList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { pid: sltType.id, seachValue: searchForm.searchValue, grade: 0 } })
    .then((res: any) => {
      if (!IsEmpty(res.data)) {
        dicTypeList.push(...res.data);
        //默认选中第一条
        dictRowSlt({ row: dicTypeList[0].dictList[0] });
      } else {
        dictChildRef.value.clearDictAndDetailList();
      }
      folderLoading.value = false;
    })
    .catch((err: any) => {
      // VxeMessage('获取中间字典文件夹和左右侧的数据失败',VxeNotifyType.error)
      folderLoading.value = false;
    });
}

// 中间根据关键字查询
function handleSearch(row: any) {
  folderLoading.value = true;
  const url = '/api/sys/basDict/findDictTypeAndDictList';
  dicTypeList.length = 0; //放入数据前清空数据
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { pid: sltType.id, seachValue: searchForm.searchValue, grade: 0 } })
    .then((res: any) => {
      folderLoading.value = false;
      if (!IsEmpty(res.data)) {
        dicTypeList.push(...res.data);
        //默认选中第一条
        dictRowSlt({ row: dicTypeList[0].dictList[0] });
      } else {
        dictChildRef.value.clearDictAndDetailList();
      }
    })
    .catch((err: any) => {
      folderLoading.value = false;
      // VxeMessage('根据关键字获取中间文件夹失败',VxeNotifyType.error)
    });
}

// 回车查询
function keyupEnter(e: any) {
  if (e.$event.code == 'Enter') {
    handleSearch(searchForm.searchValue);
  }
}

// 选中中间文件夹第一个  最右侧组件数据
function dictRowSlt({ row }: any) {
  //(proxy.$refs.dictTable as any).setCurrentRow(row);
  sltDictId.value = row.id;
  dictChildRef.value.initPage(row); //给最右侧组件传值
}

// 选中中间文件夹  点击更新最右侧组件数据
function dbClickFolder(row: any) {
  // proxy.$router.push({ path: '/dictChildList', query: { id: row.id, url: '/dictFolder' } });
  sltDictId.value = row.id;
  dictChildRef.value.initPage(row);
}

//上方调用时注释了的方法
function getChildren(obj: any) {
  const children = obj.children;
  if (children.length > 0) {
    return getChildren(children[0]);
  } else {
    return obj;
  }
}
//**判断为空*/
function IsEmpty(value: any) {
  if (value === undefined || value === '' || value === null) {
    return true;
  }
  if (JSON.stringify(value) === '{}') {
    return true;
  }
  return false;
}
</script>

<style lang="scss" scoped>
#dictFolder {
  height: 100%;
  .bodyContent {
    height: calc(100% - 60px);

    .Splitpanes {
      width: 100%;
      height: 100%;
    }
    // 附加按钮间距
    .button-blue {
      margin: 5px 0 5px 5px;
    }
    // 最左侧的树
    .treeScroll {
      height: calc(100% - 40px);
      :deep(.el-scrollbar__view) {
        height: 100%;
        background-color: $base-white;
        .sampleType {
          height: 100%;
          .tools-tree {
            min-width: 168px;
            padding: 0 5px 5px 5px;
            font-size: $font-size;
            border: none;
          }
        }
      }
    }

    // 中间文件夹的
    .middleBox {
      height: 100%;
      .cardBox {
        height: calc(100% - 40px);
        background-color: $base-white;
        .el-row {
          width: 100%;
          margin-left: 0 !important;
          margin-right: 0 !important;
          .elColClazz {
            padding-left: 10px !important;
            padding-right: 10px !important;
            margin-bottom: 10px;

            .el-card {
              :deep(.el-card__header) {
                padding: 10px;
              }
              :deep(.el-card__body) {
                padding: 10px 10px 10px 5px;
              }

              .folder-image {
                margin-bottom: 10px;
                cursor: pointer; //鼠标移上去变小手
                .image {
                  width: 100%;
                  // height: 100%;
                  display: block;
                }
                .folderNameBox {
                  // width: 72px;
                  margin-top: -15px;
                  height: 32px;
                  line-height: 32px;
                  font-size: 1.3vh;
                  text-align: center;
                  overflow: hidden;
                }
              }
              .selectedBorder {
                border: 2px solid $vxe-table-selectedColor;
              }
            }
          }
        }
      }
    }
  }
}
</style>
